<template>
  <Form :label-width="70">
    <FormItem label="显示">
      <i-switch size="small" v-model="xAxis.show"></i-switch>
    </FormItem>
    <FormItem label="类型">
      <Tooltip content="当前组件不支持切换类型" placement="left" :disabled="!lockType">
        <RadioGroup size="small" v-model="xAxis.type" type="button">
          <Radio label="value" :disabled="lockType">数值型</Radio>
          <Radio label="category" :disabled="lockType">类目型</Radio>
          <Radio label="time" :disabled="lockType">时间型</Radio>
        </RadioGroup>
      </Tooltip>
    </FormItem>
    <Collapse class="m-t-5px">
      <Panel>
        轴名称：{{xAxis.name}}
        <div slot="content">
          <FormItem label="名称">
            <Input size="small" v-model="xAxis.name" placeholder=""/>
          </FormItem>
          <FormItem label="显示位置">
            <Select :transfer="true" size="small" v-model="xAxis.nameLocation">
              <Option value="start">start</Option>
              <Option value="middle">middle</Option>
              <Option value="end">end</Option>
            </Select>
          </FormItem>
          <FormItem label="文本颜色">
            <PnColorPicker size="small" v-model="xAxis.nameTextStyle.color" alpha recommend/>
          </FormItem>
          <FormItem label="字体大小">
            <InputNumber size="small" :max="1000" :min="0" v-model="xAxis.nameTextStyle.fontSize" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="与轴间隔">
            <InputNumber size="small" :max="1000" :min="0" v-model="xAxis.nameGap" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="旋转角度">
            <InputNumber size="small" :max="1000" :min="-1000" v-model="xAxis.nameRotate" :active-change="false"></InputNumber>
          </FormItem>
        </div>
      </Panel>
      <Panel>
        刻度标签
        <ShowToggle class="float-right" v-model="xAxis.axisLabel.show"></ShowToggle>
        <div slot="content">
          <FormItem label="文本颜色">
            <PnColorPicker size="small" v-model="xAxis.axisLabel.color" alpha recommend/>
          </FormItem>
          <FormItem label="字体大小">
            <InputNumber size="small" :max="1000" :min="0" v-model="xAxis.axisLabel.fontSize" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="角度">
            <Select :transfer="true" size="small" v-model="xAxis.axisLabel.rotate">
              <Option v-for="(item, index) in $PnChartDict.rotates" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItemPanel title="格式化">
            <CodeEditor v-model="xAxis.axisLabel.formatter" :showLint="false" :lineNumbers="false"
                        :placeholder="'示例：\n(value, index) => {\n  return value\n}'"></CodeEditor>
          </FormItemPanel>
        </div>
      </Panel>
      <Panel>
        轴线
        <ShowToggle class="float-right" v-model="xAxis.axisLine.show"></ShowToggle>
        <div slot="content">
          <FormItem label="颜色">
            <PnColorPicker size="small" v-model="xAxis.axisLine.lineStyle.color" alpha recommend/>
          </FormItem>
          <FormItem label="线宽">
            <InputNumber size="small" :max="1000" :min="0" v-model="xAxis.axisLine.lineStyle.width" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="类型">
            <Select :transfer="true" size="small" v-model="xAxis.axisLine.lineStyle.type">
              <Option v-for="(item, index) in $PnChartDict.borderStyles" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </div>
      </Panel>
      <Panel>
        轴刻度
        <ShowToggle class="float-right" v-model="xAxis.axisTick.show"></ShowToggle>
        <div slot="content">
          <FormItem label="颜色">
            <PnColorPicker size="small" v-model="xAxis.axisTick.lineStyle.color" alpha recommend/>
          </FormItem>
          <FormItem label="线宽">
            <InputNumber size="small" :max="1000" :min="0" v-model="xAxis.axisTick.lineStyle.width" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="类型">
            <Select :transfer="true" size="small" v-model="xAxis.axisTick.lineStyle.type">
              <Option v-for="(item, index) in $PnChartDict.borderStyles" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </div>
      </Panel>
      <Panel>
        区域分隔线
        <ShowToggle class="float-right" v-model="xAxis.splitLine.show"></ShowToggle>
        <div slot="content">
          <FormItem label="颜色">
            <PnColorPicker size="small" v-model="xAxis.splitLine.lineStyle.color" alpha recommend/>
          </FormItem>
          <FormItem label="线宽">
            <InputNumber size="small" :max="1000" :min="0" v-model="xAxis.splitLine.lineStyle.width" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="类型">
            <Select :transfer="true" size="small" v-model="xAxis.splitLine.lineStyle.type">
              <Option v-for="(item, index) in $PnChartDict.borderStyles" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </div>
      </Panel>
    </Collapse>
  </Form>
</template>

<script>
export default {
  name: "EchartsXAxisConfigForm",
  props: {
    value: {
      type: Object,
      default () {
        return {}
      }
    },
    lockType: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      xAxis: this.value
    }
  },
  mounted() {

  },
  methods: {},
  computed: {},
  watch: {
    value (val) {
      this.xAxis = val;
    }
  }
}
</script>

<style scoped>

</style>
